<template>
  <Row :gutter="16" style="height: 100%;">
    <Col span="6" style="height: 100%;">
      <Card class="project-menu" style="height: 100%;">
        <template slot="title">
          <Dropdown>
            <Button type="primary" ghost>
              添加菜单
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>添加顶栏菜单</DropdownItem>
              <DropdownItem>添加子菜单</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Button type="primary" style="margin-left: 10px;" ghost>
            <Icon type="md-list" />
            全部收起</Button>
        </template>

        <Tree v-if="list.length" show-checkbox :data="list" :render="renderContent" @on-select-change="nodeSelect"
              ref="menuTree"></Tree>
        <Spin size="large" fix v-if="!list.length"></Spin>
      </Card>
    </Col>
    <Col span="18" style="height: 100%;">
      <menu-edit :tableData="tableData" style="height: 100%;"></menu-edit>
    </Col>
  </Row>

</template>

<script>
import menuEdit from "./edit";

export default {
  name: "project-menu",
  components: {
    menuEdit
  },
  data() {
    return {
      list: [],
      data2: [],
      tableData: []
    }
  },
  mounted() {
    let menuList = this.$store.getters.menuList;
    this.each(menuList)
    setTimeout(() => {
      this.list = menuList;
    }, 1000)
  },
  methods: {
    each(list) {
      if (Array.isArray(list)) {
        list.forEach(e => {
          e.expand = true;
          console.log(e)
          if (e.children)
            this.each(e.children)
        })
      }
    },
    renderContent(h, {data}) {
      return h('span', data.meta.title)
    },
    nodeSelect(arr, node, li) {
      if (node.children && node.children.length) {
        this.tableData = node.children
      } else {
        this.tableData = arr
      }
    }
  }
}
</script>

<style scoped>

</style>
